import React, { Component } from 'react'
import BScroll from 'better-scroll' // betterScroll的子元素只能有一个，且高度必须超过className
import axios from "axios"
import Son  from "./son"
class List extends Component {
  state = {
      arr:[],
      name:"zhangsan"
  }
  componentDidMount(){
      axios.get("/list").then(res=>{
          console.log(res.data);
          this.setState({
              arr:res.data.list
          },()=>{ // 页面渲染完以后执行，类比于vue得$nextTick
            this.bs = new BScroll(document.getElementById("bs"),{
                scrollY:true
            })
          })
          // setSatate是异步得，如果获取state里最新的状态，必须要在第二个参数，回调函数里获取
          console.log(this.state.arr,123456)
      })
  }
  componentWillUnmount(){
      this.bs.destroy() // 在组件销毁得生命周期将betterScroll卸载掉
  }
  checkname(){
    // this.setState({
    //   name:"lisi"
    // },()=>{  // 页面render完去重新执行得，在这个回调函数中能不setSsta就不要再setState
    //    console.log(this.state.name)
    // })
    // console.log(this.state.name)

     setTimeout(()=>{
        this.setState({
           name:"wangwu"
        })
        console.log(this.state.name,"在延时器里")
     },500)
  }
  render() {
    return (
      <div className='better-wrap' id='bs'>
          <h2>{this.state.name}</h2>
          <button onClick={this.checkname.bind(this)}> 点击我修改name</button>
          <ul>
            {
               this.state.arr&& this.state.arr.length?this.state.arr.map((item,index)=>{
                   return <Son send={item.name} key={index}></Son>
               }):"暂无数据"
            }
          </ul>
      </div>
    )
  }
}

export default List